<template>
    <div class="home-top" :class="isSp ? 'sp' : ''" v-if="isPc">
        <!-- <video :style="{ opacity: playEnd ? 1 : 0 }" src="https://static.inclusionconf.com/static/images/kv-end-pc-t4.mp4" muted loop="loop" autoplay="autoplay" playsinline="" poster="https://mdn.alipayobjects.com/huamei_hmb6iy/afts/img/A*b1hUSJRy9PwAAAAAAAAAAAAADjeTAQ/original" x-webkit-airplay="true" webkit-playsinline="true" x5-video-player-type="h5" x5-video-player-fullscreen="true" x5-video-orientation="portraint" renderer="standard" id="loopVideo" player="system" class="show-video"></video>
        <video src="https://static.inclusionconf.com/static/images/kv-start-pc-t2.mp4" id="video" muted autoplay="autoplay" playsinline="" poster="https://mdn.alipayobjects.com/huamei_hmb6iy/afts/img/A*b1hUSJRy9PwAAAAAAAAAAAAADjeTAQ/original" x-webkit-airplay="true" webkit-playsinline="true" x5-video-player-type="h5" x5-video-player-fullscreen="true" x5-video-orientation="portraint" renderer="standard" player="system"></video> -->
        <image src="https://static.inclusionconf.com/static/images/home-new-banner-pc-en-t1.png" v-if="En" alt="">
        <image src="https://static.inclusionconf.com/static/images/home-new-banner-pc-t1.png" v-else alt="">
        <!-- <transition name="toright">
            <img v-if="showText" src="https://static.inclusionconf.com/static/images/new/pc-banner-text-top.png" alt="" class="home-top-img">
        </transition>
        <transition name="toright">
            <img v-if="showText" src="https://static.inclusionconf.com/static/images/new/pc-banner-text-bottom.png" alt="" class="home-bottom-img">
        </transition>
        <transition name="toright">
            <div v-if="showText" class="home-top-text" v-html="$t('home1')"></div>
        </transition> -->
    </div>
    <div class="home-top" v-else>
        <!-- <img src="https://static.inclusionconf.com/static/images/wap-banner.png" v-if="isAndroidWx" alt="" class="video-mask"> -->
        <!-- <template>
            <video :style="{ opacity: playEnd ? 1 : 0 }" src="https://static.inclusionconf.com/static/images/kv-end-wap-t3.mp4" muted poster="https://static.inclusionconf.com/static/images/kv-wap-bg.jpg" loop="loop" autoplay="autoplay" webkit-playsinline='true' playsinline='true' x5-video-player-type="h5-page" class="show-video"></video>
            <video src="https://static.inclusionconf.com/static/images/kv-start-wap.mp4" poster="https://static.inclusionconf.com/static/images/kv-wap-bg.jpg" id="video" muted autoplay="autoplay" webkit-playsinline='true' playsinline='true' x5-video-player-type="h5-page"></video>
        </template> -->
        <image class="img" src="https://static.inclusionconf.com/static/images/home-new-banner-wap-en-t1.png" v-if="En" mode="widthFix" alt="">
        <image class="img" src="https://static.inclusionconf.com/static/images/home-new-banner-wap-t1.png" v-else mode="widthFix" alt="">
        <!-- <video src="https://static.inclusionconf.com/static/images/kv-wap1.mp4" muted autoplay="autoplay" id="loopVideo" loop="loop" playsinline="" poster="" x-webkit-airplay="true" webkit-playsinline="true" x5-video-player-type="h5" x5-video-player-fullscreen="true" x5-video-orientation="portraint" renderer="standard" player="system"></video> -->
        <!-- <div class="home-top-img">
            <transition name="fade">
                <img v-if="showText" src="https://static.inclusionconf.com/static/images/new/wap-banner-text.png" alt="">
            </transition>
        </div> -->
        <!-- <div class="home-top-text" :style="{ transform: `translateY(${ scrollTop }px)`, bottom: bottom + 'px' }" v-html="$t('home1')"></div> -->
        <!-- <transition name="fade">
            <div class="home-top-text" :class="isAndroidWx ? 'android-text' : ''" v-html="$t('home1')"></div>
        </transition> -->
    </div>
</template>

<script>

export default {
    data() {
        return {
            playEnd: false,
            showText: false,
            isSp: false, // 判断是否竖屏  ipad
            isInit: true,
            scrollTop: 0,
            bottom: 0,
            windowHeight: 0,
            isAndroidWx: true,
            currentTime: 0
        }
    },
    // mounted() {
    //     let width = window.innerWidth || document.documentElement.clientWidth;
    //     let height = window.innerHeight || document.documentElement.clientHeight;
    //     this.windowHeight = height
    //     this.isSp = width < height

    //     window.addEventListener('resize', () => {
    //         width = window.innerWidth || document.documentElement.clientWidth;
    //         height = window.innerHeight || document.documentElement.clientHeight;
    //         this.isSp = width < height
    //     })

    //     const dom = document.getElementById('video')
    //     if (dom) {
    //         dom.addEventListener('pause', () => {
    //             this.playEnd = true
    //         })
    //     }
    // },
    // activated() {
    //     if (this.playEnd) {
    //         this.showText = true
    //     }
    //     const dom = document.getElementById('loopVideo')
    //     if (dom) {
    //         dom.play()
    //     }
    // },
    methods: {
        link() {
            this.$router.push({
                name: 'join'
            })
        },
        // 判断当前设备是安卓还是iOS
        getDeviceType() {
            var userAgent = navigator.userAgent.toLowerCase();
            if (userAgent.indexOf("android") != -1) {
                return "android";
            } else if (/(iphone|ipad|ipod|ios)/i.test(userAgent)) {
                return "ios";
            } else {
                return "unknown";
            }
        },
        is_weixn() {
            var ua = navigator.userAgent.toLowerCase();
            if (ua.match(/MicroMessenger/i) == "micromessenger") {
                return true;
            } else {
                return false;
            }
        }
    }
}
</script>

<style lang="scss" scoped>
@media screen and (min-width: 768px) {
    .home-top {
        width: 100%;
        position: relative;

        img {
            width: 100%;
            height: auto;
        }

        video {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
        }

        .show-video {
            display: block;
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .home-top-img {
            position: absolute;
            left: 168px;
            top: 160px;
            width: 550px;
            height: auto;
        }

        .home-bottom-img {
            position: absolute;
            left: 168px;
            bottom: 113px;
            width: 425px;
            height: auto;
        }

        .home-top-text {
            position: absolute;
            left: 168px;
            top: 91.2vh;
            width: 100%;
            display: flex;
            font-family: AlibabaPuHuiTi_3_45_Light;
            font-size: 16px;
            color: #FFFFFF;
            line-height: 26px;
            font-style: normal;

            &::before {
                content: "";
                position: absolute;
                left: 0;
                top: -10px;
                width: 32px;
                height: 2px;
                background: #fff;
            }
        }
    }

    .toright-enter-active {
        animation: toright 0.3s linear;
        transform: translateX(-100%) translateY(-50%);
        opacity: 0;
    }

    .toright-leave-active {
        animation: torightleave 0.3s linear;
    }

    @keyframes toright {
        0% {
            opacity: 0;
            transform: translateX(-100%) translateY(-50%);
        }

        to {
            opacity: 1;
            transform: translateX(0) translateY(-50%);
        }
    }

    @keyframes torightleave {
        0% {
            opacity: 1;
            transform: translateX(0) translateY(-50%);
        }

        to {
            opacity: 0;
            transform: translateX(-100%) translateY(-50%);
        }
    }
}

@media screen and (max-width: 1470px) and (min-width: 768px) {
    // .home-top {
    //     width: 100%;
    //     height: 100vh;
    //     position: relative;

    //     video {
    //         width: 100%;
    //         height: 100%;
    //         object-fit: fill;
    //         overflow: hidden;
    //         background-color: #000031;
    //     }

    //     .show-video {
    //         position: absolute;
    //         left: 0;
    //         top: 0;
    //         width: 100%;
    //         height: 100%;
    //         object-fit: fill;
    //         overflow: hidden;
    //         background-color: #000031;
    //     }

    //     .home-top-img {
    //         width: 400px;
    //         height: auto;
    //     }

    //     .home-top-text {
    //         position: absolute;
    //         left: 0;
    //         bottom: 48px;
    //         width: 100%;
    //         display: flex;
    //         align-items: center;
    //         justify-content: center;
    //         font-family: AlibabaPuHuiTi_3_45_Light;
    //         font-size: 16px;
    //         color: #FFFFFF;
    //         line-height: 26px;
    //         text-align: center;
    //         font-style: normal;
    //     }

    //     &.sp {
    //         height: 56.25vw;

    //         .home-top-img {
    //             width: 280px;
    //         }

    //         .home-top-text {
    //             bottom: 20px;
    //         }
    //     }
    // }
}

@media screen and (max-width: 767px) {
    .home-top {
        width: 100%;
        position: relative;

        .img {
            width: 100%;
            height: auto;
        }

        .video-mask {
            width: 100%;
            height: auto;
            background-color: #000134;
        }

        video {
            width: 100%;
            height: auto;
            display: block;
        }

        .show-video {
            display: block;
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
        }

        .home-top-img {
            position: absolute;
            right: 9rpx;
            top: 25rpx;
            width: 447rpx;
            height: auto;

            img {
                width: 100%;
            }

            &.android-home-top {
                top: 28rpx;
                transform: translate(-50%, 0);
            }
        }

        .home-top-text {
            position: absolute;
            right: 0;
            bottom: -05rpx;
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: flex-end;
            text-align: right;
            font-family: AlibabaPuHuiTi_3_45_Light;
            font-size: 22rpx;
            color: rgba(255, 255, 255, 1);
            line-height: 36rpx;
            font-style: normal;
            background: linear-gradient(to bottom, transparent 0%, #000632 80%, #000632 100%);
            padding: 50px 9rpx 12px 4rpx;

            &::before {
                content: "";
                position: absolute;
                right: 9rpx;
                top: 42px;
                width: 4rpx;
                border-bottom: 1px solid #FFFFFF;
            }
        }

        .btn {
            width: 147px;
            height: 40px;
            margin: 30px auto 0;
            background: linear-gradient(to right, #1A39D6, #7F51D2);
            display: flex;
            align-items: center;
            justify-content: center;
            font-family: AlibabaPuHuiTi_3_65_Medium;
            font-size: 14px;
            color: #FFFFFF;
            line-height: 14px;
            text-align: left;
            font-style: normal;
            border-radius: 20px;
            cursor: pointer;

            i {
                margin-left: 6px;
                font-size: 14px;
            }
        }
    }

    .fade-enter-active {
        animation: fade 0.5s linear;
        opacity: 0;
    }

    .fade-leave-active {
        animation: fadeleave 0.5s linear;
    }

    @keyframes fade {
        0% {
            opacity: 0;
        }

        to {
            opacity: 1;
        }
    }

    @keyframes fadeleave {
        0% {
            opacity: 1;
        }

        to {
            opacity: 0;
        }
    }
}
</style>